const {
  devServer,
  configureWebpack,
  chainWebpack,
  postCSSPlugin,
} = require("./build");

console.log("当前Node.js版本", process.version);

const fs = require("fs");
const less = require("less");

/**
 * @params {string} url --- url is a relative path string of a css file
 */
const readLess = (url) => {
  const lessStr = fs.readFileSync(url, "utf-8");
  let output = "";
  less.render(lessStr, (err, res) => {
    if (err) {
      throw new Error(err);
    } else {
      output = res;
    }
  });

  const _vars = {};

  output.css
    .replace(":export ", "")
    .replace(/\{|\}|\s/gi, "")
    .split(";")
    .filter((f) => Boolean(f))
    .map((m) => m.split(":"))
    .forEach((item) => {
      _vars[item[0]] = item[1];
    });

  return _vars;
};

const vars = readLess("./src/styles/vars.less");

console.log("vars", vars);

module.exports = {
  // DEV环境忽略eslint
  lintOnSave: false,
  // 是否开启并行
  parallel: require("os").cpus().length > 1,
  publicPath: "./",
  outputDir: "dist",
  runtimeCompiler: true,
  filenameHashing: false,
  productionSourceMap: false,
  configureWebpack,
  chainWebpack,
  // 解决 ant 按需加载 less 'Inline JavaScript is not enabled' 报错
  css: {
    loaderOptions: {
      // 向 CSS 相关的 loader 传递选项
      less: {
        modifyVars: {
          "primary-color": vars.primary_color,
          "success-color": vars.success_color,
          "warning-color": vars.warning_color,
          "background-color-base": vars.dark_color_6,
          "background-color-light": vars.dark_color_6,
          "body-background": vars.dark_color,
          "component-background": vars.dark_color_6,
          "label-color": vars.text_color,
          "border-color-base": vars.dark_color_6,
          "border-color-split": vars.dark_color_6,
          "heading-color": vars.text_color,
          "text-color": vars.text_color,
          "item-active-bg": vars.primary_color,
          "item-hover-bg": vars.primary_color,
          "text_color_secondary": vars.text_color_secondary,
          "disabled_color": vars.disabled_color
        },
        javascriptEnabled: true,
      },
      // vue-cli内置了postcss，向其中传递所需的postcss处理
      postcss: {
        plugins: [
          postCSSPlugin["postcss-pcx2rem"]({
            baseDpr: 1,
            //   html基础fontSize  设计稿尺寸    屏幕尺寸
            remUnit: (16 * 1920) / 1920,
            remPrecision: 6,
            forcePxComment: "px",
            keepComment: "no",
          }),
        ],
      },
    },
  },

  devServer,
};
